<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>DHTML Tree + Grid samples.</title>
</head>
<style>
	body {font-size:12px; }
	.{font-family:arial;font-size:12px}
	h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
	xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
</style>
<body onload="doOnLoad()">
	<h1>Tree + Grid</h1>
	<link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
	<script  src="../js/dhtmlXCommon.js"></script>
	<script  src="../js/dhtmlXTree.js"></script>		
	<script  src="../js/dhtmlXTree_xw.js"></script>

    <link rel="STYLESHEET" type="text/css" href="../../../dhtmlxgrid/css/dhtmlXGrid.css">
	<script  src="../../../dhtmlxgrid/pro/js/dhtmlXCommon.js"></script>
	<script  src="../../../dhtmlxgrid/pro/js/dhtmlXGrid.js"></script>
	<script  src="../../../dhtmlxgrid/pro/js/dhtmlXGridCell.js"></script>
	<script  src="../../../dhtmlxgrid/pro/js/dhtmlxGrid_drag.js"></script>
	<script>
		var mygrid,tree;
		function doOnLoad(){
			mygrid = new dhtmlXGridObject('gridbox');
			tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			setTimeout("buildTree()",10)
			setTimeout("buildGrid()",11)
		}
		function buildTree(){
			
			tree.setImagePath("../imgs/");
			tree.enableDragAndDrop(true);
			tree.loadXML("tree.xml")
    		tree.setSerializationLevel(true,true);
		}
		function buildGrid(){
			//set grid parameters
			mygrid.selMultiRows = true;
			mygrid.setImagePath("../../../dhtmlxgrid/imgs/");
			var flds = "Sales,Book Title,Author,Price";
			mygrid.setHeader(flds);
			mygrid.setInitWidths("50,150,120,80")
			mygrid.setColAlign("right,left,left,right")
			mygrid.setColTypes("dyn,ed,ed,price");
			mygrid.setColSorting("int,str,str,int")
			mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
			mygrid.enableDragAndDrop(true);
			//start grid
			mygrid.init();
			mygrid.loadXML("../../../dhtmlxgrid/grid.xml");
		}
	</script>
	<table>
		<tr>
			<td>
				<div id="treeboxbox_tree" style="width:260; height:260;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
			</td>
            <td width="200px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
                <div id="gridbox" width="600px" height="250px" style="background-color:white;overflow:hidden"></div>
            </td>
		</tr>
		<tr>


			<td valign="top">
                <div>
    			<a href="javascript:void(0)" onclick="document.getElementById('zet1').value=tree.serializeTree()">Load XML from Tree</a>&nbsp;|&nbsp;
	    		<a href="javascript:void(0)" onclick="tree.deleteChildItems(0); tree.loadXMLString(document.getElementById('zet1').value)">Init Tree with XML</a>
                </div>
                <div>
			    <textarea id="zet1" style="width:300; height:200;"></textarea>
                </div>
			</td>
			<td width="200px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
                <div>
                </div>
                <div>
			    <textarea id="zet2" style="display:none; width:300; height:200;"></textarea>
                </div>
            </td>


		</tr>
	</table>
<hr>
<br><br>

</body>
</html>
